<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/mine/mdxqBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="我的门店" :showBack="true"></cusHeaderVue>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 130rpx)`}">
			<view class="contTop">
				<view class="contTit">
					门店<text class="num">{{totalShopCount}}</text>家<text>到店打卡<text class="num">{{totalCheckCount}}</text>次</text>
				</view>
				<view class="contTime" @click="selectMonth">
					{{selectedMonth}}
					<u-icon name="arrow-down-fill" color="#F79F31" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="contBoxBig">
			<scroll-view scroll-y="true" :style="{height:swiperHeight}">
				<view class="listBox">
					<view class="listLi" v-for="(item,index) in storeList" :key="index" @click="toUrl('/pages/mine/shopXq?id=' +　item.id)">
						<view class="listLeft">
							<view class="listName">
								{{item.name}}
							</view>
							<view class="listTime">
								<view class="listCi">
									<view style="margin-left: 34.62rpx;flex: 1;text-align: center;">
										{{item.checkCount}}次
									</view>

								</view>
								{{item.address}}
							</view>
						</view>
						<view class="listTag">
							{{item.level}}
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
		<MonthPickerPopup 
			ref="monthPickerRef"
			@confirm="onMonthConfirm"
			@cancel="onMonthCancel"
		/>
	</view>
</template>

<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import {
		ref,
		onMounted,
		reactive,
		getCurrentInstance,
		nextTick
	} from 'vue';
	
	import {getMyShops} from '@/api/interface.js';
	
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import MonthPickerPopup from '@/components/MonthPickerPopup.vue';



	const scrollerHeight = ref('');
	const swiperHeight = ref('');
	
	
	
	const monthPickerRef = ref(null);
	const selectedMonth = ref('');
	const storeList = ref([]);
	
	const totalCheckCount = ref(0);
	const totalShopCount = ref(0);
	
	
	// 初始化默认月份
	const initDefaultMonth = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		selectedMonth.value = `${year}年${month}月`;
		getList();
	};
	
	// 打开年月选择器
	const getList = () => {
		getMyShops({dateStr:selectedMonth.value}).then(res=>{
			console.log(res.data)
			storeList.value = res.data.shopS
			totalCheckCount.value = res.data.totalCheckCount
			totalShopCount.value = res.data.totalShopCount
		})
	};
	// 打开年月选择器
	const selectMonth = () => {
		monthPickerRef.value.open();
	};
	
	// 选择确认
	const onMonthConfirm = (month) => {
		console.log(month)
		selectedMonth.value = month;
		getList();
	};
	
	// 取消（可选处理）
	const onMonthCancel = () => {
		// 可不处理，或做日志等
	};
	
	
	const toUrl = (urlSrc) =>{
		uni.navigateTo({
			url:urlSrc
		})
	}
	
	
	onLoad(() => {
		getBarHeight();
		initDefaultMonth();
	})
	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(resu) {
				scrollerHeight.value = resu.statusBarHeight + 'px'
				// resu 可以获取当前屏幕的高度
				const query = uni.createSelectorQuery();
				query.select('.contBoxBig').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					swiperHeight.value = resu.windowHeight - res[0].top - resu.safeAreaInsets
						.bottom - resu.statusBarHeight - 70 +
						'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 750rpx;
		height: 740rpx;
		position: absolute;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;

		.contTop {
			padding: 0 24rpx;
			box-sizing: border-box;

			.contTit {
				font-weight: 500;
				font-size: 29.41rpx;
				color: #1C2027;

				text {
					margin-left: 30rpx;
				}

				.num {
					font-size: 48.09rpx;
					font-weight: 400;
					color: #F79F31;
					margin-left: 0;
				}
			}

			.contTime {
				width: 210.9rpx;
				height: 56.41rpx;
				border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
				background: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #f79f31;
				font-weight: 400;
				font-size: 25.64rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				border: 1px solid #f79f31;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.contBoxBig {

		padding: 10rpx 22rpx;
		box-sizing: border-box;

		.listBox {
			.listLi {
				width: 100%;
				border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
				background: #ffffff;
				padding: 35rpx 27rpx;
				box-sizing: border-box;
				margin-bottom: 19rpx;
				display: flex;
				align-items: center;
				position: relative;

				.listLeft {
					flex: 1;

					.listName {
						font-weight: 500;
						font-size: 33.33rpx;
						color: #1C2027;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 650rpx;
					}

					.listTime {
						color: #7f8494;
						font-weight: 400;
						font-size: 25.64rpx;
						margin-top: 22rpx;
						display: flex;

						.listCi {
							width: 94.23rpx;
							height: 32.05rpx;
							color: #f79f31;
							font-weight: 400;
							font-size: 24.36rpx;
							background: url('/static/home/dkcs.png') no-repeat center;
							background-size: 100% 100%;
							margin-right: 11rpx;
						}
					}
				}

				.listTag {
					position: absolute;
					width: 60rpx;
					height: 40rpx;
					background: url('/static/home/tagYz.png') no-repeat center;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					right: 0;
					top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFBF7;
				}
			}
		}
	}
</style>